<template>
	<view class="device-list-container">
		<u-sticky>
			<u-cell-group :customStyle="{backgroundColor:'#FFF'}">
				<u-cell title="全部机房" value="筛选" @click="isShowFilter = true"></u-cell>
			</u-cell-group>
		</u-sticky>
		<u-overlay :show="isShowFilter" @click="isShowFilter = false">
			<view @tap.stop>
				<u-cell-group :customStyle="{backgroundColor:'#FFF'}">
					<u-cell title="全部机房" value="筛选"></u-cell>
				</u-cell-group>
				<view class="filter-form">
					<u--form labelPosition="left" :model="queryInfo" ref="form1" :labelStyle="labelStyle">
						<u-form-item label="机房:" prop="userInfo.name" ref="item1">
							<u--input v-model="queryInfo.room"></u--input>
						</u-form-item>
						<u-form-item label="型号:" prop="userInfo.name" ref="item2">
							<u--input v-model="queryInfo.model"></u--input>
						</u-form-item>
						<u-form-item label="类型:" prop="userInfo.name" ref="item3">
							<u--input v-model="queryInfo.type"></u--input>
						</u-form-item>
					</u--form>
					<view class="search-btn">
						<u-button color="#0A7AFF" text="查询"></u-button>
					</view>
					<view class="clear"></view>
				</view>
			</view>
		</u-overlay>
		<view class="device-list">
			<device-cell v-for="item in deviceList" :key="item.id" :title="item.name" :image="item.pic" btnText="库存"
				btnType="primary" @click="gotoDetail">
				<view class="device-info">
					<view>
						条码：{{item.code}}
					</view>
					<view>
						型号：{{item.model}}
					</view>
					<view>
						机房：{{item.room}}
					</view>
				</view>
			</device-cell>
		</view>
	</view>
	</view>
</template>

<script>
	import DeviceCell from '@/components/DeviceCell/DeviceCell.vue'
	export default {
		components: {
			DeviceCell
		},
		data() {
			return {
				isShowFilter: false,
				labelStyle: {
					color: '#999999'
				},
				queryInfo: {
					code: '',
					model: '',
					room: ''
				},
				deviceList: [{
						id: 1,
						name: '强子对撞机',
						code: '3ISO3OO',
						model: '物理对撞设备',
						room: '测试机房',
						pic: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}, {
						id: 2,
						name: '强子对撞机',
						code: '3ISO3OO',
						model: '物理对撞设备',
						room: '测试机房',
						pic: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						id: 3,
						name: '强子对撞机',
						code: '3ISO3OO',
						model: '物理对撞设备',
						room: '测试机房',
						pic: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}
				]
			};
		},
		methods: {
			gotoDetail() {
				// uni.navigateTo({
				// 	url: '/subpkg/device-detail/device-detail'
				// })
			}
		}
	}
</script>

<style lang="scss">
	.device-list-container {
		min-height: 100vh;
		background-color: #F6F6F6;

		.filter-form {
			background-color: #fff;
			padding-left: 15px;
			padding-right: 15px;
			padding-bottom: 15px;

			.u-input__content {
				height: 16px;
			}

			.search-btn {
				margin-top: 16rpx;
				float: right;

				.u-button {
					width: 164px;
				}
			}
		}

		.device-list {
			height: 100%;
			padding: 20rpx 18rpx 0;
		}
	}

	// device-cell组件插槽样式
	.device-info {
		font-size: 12px;
		color: #666666;

		view {
			margin-top: 8rpx;
		}
	}

	// 按钮样式
	.u-button {
		height: 26px !important;
		width: 65px;

		.u-button__text {
			font-size: 14px !important;
		}

	}

	.u-form-item__body {}
</style>
